<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* 增加 box-sizing 来避免 padding 和 border 影响宽高 */
        }
        .el-header {
            background-color: rgb(204, 212, 255);
            display: flex;
            justify-content: space-between; /* 内容分布到两侧 */
            align-items: center; /* 垂直居中 */
            padding: 10px 20px;
        }
        .el-aside {
            background-color: rgb(217, 236, 255);
            height: 90vh;
        }
        .el-main {
            background-color: rgb(236, 245, 255);
        }
        /* 头像样式 */
        .avatar {
            width: 50px; /* 头像宽度 */
            height: 50px; /* 头像高度 */
            border-radius: 50%; /* 圆形头像 */
            margin-right: 20px; /* 头像和文字之间的间距 */
            object-fit: cover; /* 使图片覆盖并裁剪以适应容器 */
        }
        .header-content {
            display: flex;
            align-items: center;
        }
        .header-content span {
            font-size: 16px; /* 增大欢迎文字的字体 */
            margin-right: 20px; /* 欢迎文字和登出链接之间的间距 */
        }
        .header-content el-link {
            font-size: 16px; /* 增大登出链接的字体 */
        }
    </style>
</head>
<body>
<div id="app" class="common-layout">
    <el-container>
        <el-header>
            <el-header>
                <h2 style="text-align: center">SpringBoot智慧社区管理系统</h2>
                <div class="header-content">
                    <span>欢迎您，admin </span>
                </div>
            </el-header>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo">
                    <el-sub-menu>
                        <template #title>
                            <el-icon>
                                <location/>
                            </el-icon>
                            <span>物业系统</span>
                        </template>
                        <el-menu-item>
                            <el-link href="/pages/house.html" target="mainFrame">房屋管理</el-link>
                        </el-menu-item>

                        <el-menu-item>
                            <el-link href="/pages/owner.html" target="mainFrame">业主管理</el-link>
                        </el-menu-item>

                        <el-menu-item>
                            <el-link href="/pages/building.html" target="mainFrame">楼栋管理</el-link>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-main>
                <iframe id="mainFrame" name="mainFrame" src="/pages/owner.html"
                        style="width:100%; height:100%; border:none"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>
<script>

    const { createApp } = Vue

    const app = createApp({
        setup(){
            return {
            }
        }
    });

    app.use(ElementPlus)

    //解决图标问题
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }

    app.mount('#app')

</script>

</body>
</html>